<template>
	<!-- <view class="dialog full-screen flex-r" ref="dialog" v-show="show"> -->
	<view class="dialog full-screen flex-r" v-show="show">
		<!-- 热帖推荐弹窗 -->
		<view class="dialoghot flex-c ac bounceout" v-if="type==='hot'">
			<view class="hot-head flex-r ac jc">
				<image class="top-img" src="@/public/images/components/s.png" mode="aspectFit"></image>
			</view>
			<view class="hot-body flex-c">
				<!-- <image class="hot-body-img" src="@/public/images/components/bg_q.png" mode=""></image> -->
				<view class="discuss flex-c" ref="hotBody">
					<text class="discuss-title text-large text-hidden two">{{discussData.title}}</text>
					<view class="discuss-info flex-r jsb text-mini">
						<text>发布于{{discussData.nickname}}</text>
						<!-- <uni-dateformat class="date" :date="discussData.displayTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat> -->
						<uni-dateformat :date="discussData.displayTime" :threshold="[60000, 12*3600000]"
							format="MM-dd hh:mm"></uni-dateformat>
					</view>

					<view class="discuss-detail" ref="hotDetail">
						<view class="vote-info" v-if="discussData.type == 7 && discussData.discussOption">
							<view class="" v-if="discussData.discussOption.length>2">
								<view class="discuss-content" v-html="discussData.content"></view>
								<template v-for="(vote, index) in discussData.discussOption">
									<view class="vote-other flex-r">
										<view class="vote-item flex-r ac jsb text-small"
											:class="voteFlag?'active':vote.voteFlag?'active':'noActive'" :key="index"
											>
											<view class="progress"
												:style="'width:' + (discussData.participateNum ? vote.voteNum / discussData.participateNum * 100 : 0) + '%;'">
											</view>
											<view class="left flex-r ac">
												<text class="text-hidden">{{vote.title}}</text>
												<!-- <image class="select-icon" src="@/public/images/components/xzdh_h.png" mode="aspectFit" v-if="vote.voteFlag"></image> -->
											</view>
											<text>{{vote.voteNum}}人已投票</text>
										</view>
										<view class="vote-voteFlag" v-if="vote.voteFlag">
											<image class="vote-voteFlag-img" src="@/public/images/components/yt (2).png"
												mode="aspectFit"></image>
										</view>
										<view class="vote-voteNum" :class="voteFlag?'vote':vote.voteFlag?'vote':'noVote'" v-else>
											<text @tap.stop="voteSubmit(index)" class="vote-voteNum-con">投一票</text>
										</view>
									</view>
								</template>
							</view>
							<view class="vote-other flex-r jsb" v-else>
								<template v-for="(vote, index) in discussData.discussOption">
									<view class="vote-other-info" :key="index" @tap.stop="voteSubmit(index)">
										<view v-if="discussData.discussOption.every(vote => !vote.voteFlag)">
											<image class="vote-info-img left" v-if="getIndex(vote, index) === 0"
												src="@/public/images/components/z .png" mode="aspectFit"></image>
											<image class="vote-info-img right" v-if="getIndex(vote, index) === 1"
												src="@/public/images/components/y.png" mode=""></image>
										</view>
										<view v-else >
											<image class="vote-info-img left" v-if="getIndex(vote, index) === 0"
												:src="require(vote.voteFlag ? '@/public/images/components/z .png' : '@/public/images/components/z_h.png')"
												mode="aspectFit"></image>
											<image class="vote-info-img right" v-if="getIndex(vote, index) === 1"
												:src="require(vote.voteFlag ? '@/public/images/components/y.png' : '@/public/images/components/y_h.png')"
												mode="aspectFit"></image>
											<!-- <view class="vote-info-title" :class="index==0?'left':'right'">
												<text>{{vote.title}}</text>
											</view> -->
											<image class="voted-img" :class="index==0? 'left':'right'"
												v-if="vote.voteFlag" src="@/public/images/components/yt.png" mode="aspectFit">
											</image>
											
										</view>
										<view class="vote-info-title" :class="index==0?'left':'right'">
											<text>{{vote.title}}</text>
										</view>
										<text v-if="index==0" class="vote-other-info-voteNum left" :class="voteFlag?'leftColor':vote.voteFlag?'leftColor':'activeColor'">{{vote.voteNum}}人已投票</text>
										<text v-if="index==1" class="vote-other-info-voteNum right" :class="voteFlag?'rightColor':vote.voteFlag?'rightColor':'activeColor'">{{vote.voteNum}}人已投票</text>
									</view>
								</template>
							</view>
						</view>
						<view class="video-info" v-else-if="discussData.videoUrl"
							@tap.stop="videoPlay(discussData.id, discussData.videoUrl)">
							<FullVideo :url="discussData.videoUrl" :article="true" width="540rpx" height="304rpx">
							</FullVideo>
						</view>
						<view class="html-content" v-html="discussData.content" v-else></view>
						<view class="mask-view" v-show="showMask"></view>
					</view>
					<button class="discuss-btn color-red text-info flex-r ac jc"
						@click.native="goDetail(discussData)">查看详情</button>
				</view>
			</view>
			<image class="bot-img" src="@/public/images/components/x.png" mode="aspectFit"></image>
			<image class="qdqxan" src="@/public/images/components/qdqxan_1.png" mode="aspectFit" @tap="closeDialog">
			</image>
		</view>
	</view>
</template>

<script>
	/**
	 * ShowDialog 球吧首页弹窗
	 * @description 展示球吧首页弹窗热帖推荐
	 * @property {String} type = [hot] 弹窗类型
	 *  @value hot 热帖推荐
	 * @event {Function} close 弹窗关闭事件
	 * @example <ShowDialog :barId="barId"></ShowDialog>
	 */
	export default {
		name: "ShowDialog",
		emits: ['close'],
		props: {
			barId: { //球吧ID
				type: [String, Number],
				require: true
			}
		},
		data() {
			return {
				show: false, //是否显示弹窗
				type: undefined, //弹窗类型，方便扩展

				discussData: {}, //讨论帖详情对象
				showMask: false, //富文本超出隐藏
				voteFlag: true,
			};
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		watch: {
			type(newValue) {
				if (newValue) {
					this.show = true
					if (this.type == 'hot') {
						this.discussData.content = this.$CHS.filterRichText(this.discussData.content)
						this.discussData.content = this.filterEmptyTag(this.discussData.content)
						this.$nextTick(() => {
							// this.showMask = this.$refs.hotDetail.$el.scrollHeight+1100 >= this.dpr * 745
							this.showMask = this.$refs.hotDetail.$el.scrollHeight >= 335
							// console.log(this.showMask,'showMask',this.$refs.hotDetail.$el.scrollHeight,this.dpr * 745)
						})
					}
				}
			}
		},
		mounted() {
			let windowWidth = uni.getWindowInfo().windowWidth

			if (windowWidth) {
				this.dpr = windowWidth / 750
			} else {
				this.dpr = 0.5
			}
			console.log(windowWidth, this.dpr, '====')
		},
		deactivated() {
			console.log('deactivated');
			//移除动画效果
			if (this.$refs.dialog?.$children[0]) {
				this.$refs.dialog.$children[0].$el.classList.remove('bounceout')
			}
		},
		activated() {
			this.showHotDiscuss()
		},
		methods: {
			/**
			 * @description 过滤空标签
			 * @param {String} str
			 * @return {String}
			 */
			filterEmptyTag(str) {
				str = str.replace(/(<br\s?\/?>){2,}/ig, '$1');
				str = str.replace(/(<br\s?\/?>\s*)+<p>/ig, "<p>");
				str = str.replace(/(<br\s?\/?>\s*)+<\/p>/ig, "</p>");
				str = str.replace(/<([a-z]+?)(?:\s+?[^>]*)?>(\s|&nbsp;)*?<\/\1>/ig, "")
				return str
			},
			//查询热帖推荐
			showHotDiscuss() {
				let today = this.$CHS.getNowDate()
				let popup = uni.getStorageSync('ballbar_popup') || '{}'
				popup = JSON.parse(popup)
				console.log(today, popup, '======')
					if(!popup[this.barId] || popup[this.barId].today != today || popup[this.barId].userId != this.user.userId){
						this.$http.get({
							url: '/api/user/home/recommended/post',
							data: {
								forumId: this.barId
							}
						}).then((data)=>{
							console.log(data,'热帖弹窗')
							if(data.success && data.result){
								this.discussData = data.result
								this.type = 'hot'
								if(this.discussData.discussOption){
									this.discussData.discussOption.forEach((item)=>{
										if(item.voteFlag){
											this.voteFlag = false
										}
									})
								}
								popup[this.barId] = { today, userId: this.user.userId }
								uni.setStorageSync('ballbar_popup', JSON.stringify(popup))
							}
						})
					}
			},
			/**
			 * @description 提交投票
			 * @param {object} article - 方案数据对象
			 * @param {number} index - 索引
			 */
			voteSubmit(index) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if (this.isSubmit) {
					return
				}
				let vote = this.discussData.discussOption
				console.log(vote, 'vote')
				let status = vote.every(item => !item.voteFlag)
				if (status) {
					this.isSubmit = true
					this.$http.post({
						url: '/api/chtyForumDiscussRecord/add',
						data: {
							id: vote[index].id,
							status: 1
						}
					}).then(data => {
						console.log(data);
						if (data.success) {
							this.$ShowToast({
								text: data.message || '投票成功',
								type: 1
							})
							this.discussData.participateNum = this.discussData.participateNum + 1
							vote[index].voteFlag = true
							vote[index].voteNum = Number(vote[index].voteNum) + 1
							console.log(vote, 'vote', this.discussData.discussOption)
							this.voteFlag = false;
						} else {
							this.$ShowToast({
								text: data.message || '投票失败，请稍后重试',
								type: 2
							})
						}
					}).finally(() => {
						this.isSubmit = false
					})
				} else {
					uni.showToast({
						title: '您已完成投票',
						icon: 'none'
					})
				}
			},
			/**
			 * @description 进入详情
			 * @param {object} article - 数据对象
			 */
			goDetail(article) {
				console.log(article, '详情')
				if (article.blacklist === 1 && (article.userType != 'user' || article.userId != this.user.userId)) {
					this.$ShowToast({
						text: '您已被拉入黑名单，不能访问当前内容',
						type: 2,
						time: 3
					})
					return
				}
				let params = {
					barId: article.forumId,
					barName: article.forumName,
					barLogo: article.logo,
					type: article.userType || 'expert'
				}
				if (article.type == 1 || article.type == 99) {
					this.$CHS.goArticleDetail(article.id, params)
				} else if (article.type == 2) {
					this.$CHS.goShareDetail(article.id, params)
				} else if (article.type == 6 || article.type == 7) {
					this.$CHS.goDiscussDetail(article.id, params)
				}
				this.closeDialog()
			},
			//视频播放
			videoPlay(aid, path) {
				if (path.indexOf(this.$store.state.videoDomain) > -1) {
					path = path.substr(this.$store.state.videoDomain.length + 1)
				}
				let params = {
					aid,
					path
				}
				this.$Router.push({
					name: 'videoplay',
					params
				})
			},
			/**
			 * @description 关闭弹窗
			 */
			closeDialog() {
				this.show = false
				this.type = null
				this.discussData = {}
				//this.$emit('close', this.type)
			},
			getIndex(vote, index) {
				return index;
			}
		},

	}
</script>

<style lang="scss" scoped>
	.dialog {
		align-items: center;
		justify-content: center;
		touch-action: none;

		&.full-screen {
			z-index: 999;
			width: 100%;
			margin: $pc-margin;
			overflow-y: auto;

			.dialoghot {
				width: 600rpx;
				margin: 130rpx 0 130rpx 20rpx;
				transition: height 0.5s ease;
				height: fit-content;

				.hot-head {
					position: relative;
					top: 342rpx;

					.top-img {
						width: 711rpx;
						height: 342rpx;
					}
				}

				.hot-body {
					width: 500rpx;
					background: #FFFFFF;
					padding: 40rpx 30rpx;
					border-left: 20rpx solid #0055FF;
					border-right: 20rpx solid #0055FF;

					.discuss {
						padding-top: 40rpx;
						box-sizing: border-box;
						border-radius: 10rpx;
						position: relative;

						.discuss-title {
							max-width: 540rpx;
							font-weight: bold;
							line-height: 45rpx;

						}

						.discuss-info {
							margin: 15rpx 0;
							color: #b3b3b3;

							.date {
								margin-left: 20rpx;
							}
						}

						.discuss-content {
							font-size: 24rpx;
							font-weight: 500;
							color: #333333;
							line-height: 36rpx;
							margin-bottom: 5rpx;
						}

						.discuss-detail {
							position: relative;
							max-height: 745rpx;
							overflow: hidden;
							word-break: break-all;
							/deep/ .html-content {
								font-size: 24rpx;
								font-weight: 400;
								line-height: 36rpx;
								color: #333 !important;
								background-color: transparent !important;
								p,
								span,
								div {
									margin: 0;
									color: #333 !important;
									background-color: transparent !important;
								}

								img {
									display: none;
								}
							}

							.vote-info {
								margin-top: 5rpx;
								max-height: 440rpx;
								// overflow: scroll;
								scrollbar-width: none;
								-ms-overflow-style: none;
								-webkit-overflow-scrolling: touch;

								.vote-other {
									padding-bottom: 15rpx;
									color: #0055FF;
									.vote-item {
										margin-top: 15rpx;
										width: 460rpx;
										height: 80rpx;
										background: transparent;
										border: 1rpx solid #0055FF;
										border-radius: 10rpx;
										box-sizing: border-box;
										padding: 0 30rpx;
										position: relative;
										overflow: hidden;
										text{
											z-index: 2;
										}
										.progress {
											position: absolute;
											left: 0;
											top: 0;
											bottom: 0;
											background: #D9E5FF;
											z-index: 1;
										}

										.progressfalse {
											position: absolute;
											left: 0;
											top: 0;
											bottom: 0;
											background: #E6E6E6;
											z-index: 1;
										}

										.left {
											z-index: 2;
											max-width: 450rpx;
											margin-right: 10rpx;

											.select-icon {
												flex: 1;
												margin-left: 20rpx;
												min-width: 32rpx;
												width: 32rpx;
												height: 32rpx;
											}
										}

										&.active {
											color: #0055FF;
											border: 1rpx solid #0055FF;

											.progress {
												background: #D9E5FF;
											}
										}

										&.noActive {
											color: #666666;
											border: 1rpx solid #B3B3B3;
											.progress {
												background: #E6E6E6;
											}
										}

										.text-hidden {
											max-width: 550rpx;
										}

										&:first-child {
											margin-top: 0;
										}
									}

									.vote-voteNum {
										width: 60rpx;
										height: 80rpx;
										background: #0055FF;
										border-radius: 10rpx;
										font-weight: 500;
										color: #FFFFFF;
										text-align: center;

										.vote-voteNum-con {
											display: inline-block;
											width: 20rpx;
											height: 59rpx;
											font-size: 20rpx;
											margin-top: 10rpx;
										}
									}

									.noVote {
										background: #CCCCCC;
									}

									.vote-voteFlag {
										.vote-voteFlag-img {
											width: 60rpx;
											height: 80rpx;
										}
									}

									.vote-other-info {
										width: 294rpx;
										position: relative;
								
											.vote-info-img {
												width: 278rpx;
												height: 110rpx;
												
												&.left {
													left: -14rpx
												}
											
												&.right {
													left: -44rpx
												}
											}
											
											.voted-img {
												width: 72rpx;
												height: 72rpx;
												position: absolute;  
												top: 10rpx;
												z-index: 10000;
												&.left {
													left: 5rpx;
												}
												&.right {
													right: 62rpx;
												}
											}
											
											.vote-info-title {
												position: absolute;
												top: 50%;
												left: 50%;
												transform: translate(-50%, -50%);
												font-size: 28rpx;
												color: #FFFFFF;
												line-height: 30rpx;
												z-index: 9999;
												&.left {
													margin-top: -25rpx;
													margin-left: -15rpx;
												}
											
												&.right {
													margin-top: -25rpx;
													margin-left: -40rpx;
												}
											}
										

										.vote-other-info-voteNum {
											font-size: 26rpx;
											&.left {
												margin-left: 65rpx;
											}

											&.right {
												margin-left: 35rpx;
											}
											&.leftColor{
												color: #0055FF;
											}
											&.rightColor{
												color: #F23030;
											}
											&.activeColor{
												color: #333333;
											}
										}
									}
								}

								&::-webkit-scrollbar {
									display: none;
								}
							}

							.mask-view {
								position: absolute;
								width: 100%;
								height: 40rpx;
								left: 0;
								bottom: 0;
								background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
								z-index: 10000;
							}
						}

						.discuss-btn {
							width: 120rpx;
							height: 48rpx;
							background: #FFE5E5;
							border-radius: 30rpx;
							margin-bottom: 40rpx;
							padding: 0;
							z-index: 100000;
							margin-top: 10rpx;
						}
					}
				}

				.bot-img {
					width: 680rpx;
					height: 87rpx;
					position: relative;
					bottom: 87rpx
				}

				.qdqxan {
					width: 80rpx;
					height: 140rpx;
					position: relative;
					bottom: 87rpx
				}
			}
		}

		.bounceout {
			animation-duration: 0.4s;
			animation-fill-mode: both;
			animation-name: showAnimation;
		}
	}

	@keyframes showAnimation {
		0% {
			opacity: 0;
			transform: scale(0.1);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>